<template>
	<view class="product">
		<!-- 悬浮按钮 -->
		<up-overlay :show="isShow" @tap="isShow = false"  z-index="9" :opacity="0">
			<template #default>
				<view class="suspension">
					<view class="undistributed">
						
						<up-button text="添加产品" color="rgba(0.0.0.4)" @tap="uni.navigateTo({ url: '/pages/addProduct/addProduct' })"></up-button>
						<up-button text="添加自营产品" color="rgba(0.0.0.4)" @tap="uni.navigateTo({ url: '/pages/addSelfProduct/addSelfProduct' })"></up-button>
					</view>
				</view>
			</template>
		</up-overlay>
		
		<view class="navigation" style="height: 44px;background-color: #fff;"></view>
		
		<!-- 导航栏 -->
		<view class="content">
		    <!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
		    <view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
				<view class="nav-left" @tap="uni.switchTab({ url: '/pages/workbenches/workbenches' })">
					<up-icon name="arrow-left"  size="22"></up-icon>
				</view>
				<view class=" nav-center">
					产品管理
				</view>
				<view class="nav-right">
					<view class="" @tap="isShow = !isShow">
						<image src="/static/images/arcoDesign-plus-circle ISdzPh3@2x.png" alt=""
							style="width:48rpx;height:48rpx;" />
					</view>
				</view>
		    </view>
		</view>
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
			<productList :producArr="producArr"></productList>
		</scroll-view>
	</view>
</template>

<script setup>
import { defineComponent, ref } from 'vue';
import productList from './components/productList.vue';
import { getProductList } from '../../utils/product';
const producArr = ref([])
let isShow = ref(false)
const getProductListHandle = async () => {
	try {
		const res = await getProductList({
			businessId: uni.getStorageSync('businessId'),
		})
		console.log(res)
		producArr.value = res.data

	} catch (e) {
		console.log(e)
	}
}
getProductListHandle()
</script>

<style lang="scss">
/* 防止页面出现横向滚动条 */
page {
	overflow-x: hidden;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
	display: none;
}

* {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
	.scroll-Y {
		// height: 1200rpx;
		height: calc(100vh - 180rpx);
		margin-top: -10rpx;
	}
.product {
	background-color: rgba(255, 255, 255, 1);
}
/* =========悬浮按钮========= */
	.suspension{
		position: absolute;
		top:176rpx;
		right:10rpx;
	}
	/* =========导航栏========= */
	.topNav {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	
	.nav-left {
		width: 20%;
		font-size: 36rpx;
		font-weight: 600;
	}
	
	.nav-center{
		width: 60%;
		height: 62rpx;
		padding-left: 25rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: 40rpx;
	}
	 
	.nav-right {
		width: 20%;
		font-size: 36rpx;
		font-weight: 600;
		display: flex;
		justify-content: end;
	}
</style>
